<template>
	<div>
		<el-dialog v-model="showModal" class="peak-dialog" :close-on-click-modal="false" :title="title" :width="700">
			<el-form ref="paramsFormRef" class="params-form" :inline="true" label-position="right" label-width="100px" :model="paramsForm" :rules="paramsRules">
				<el-row :gutter="16" justify="start">
					<el-col :span="24">
						<div class="card-main-title mb10 ml7">数据统计组件</div>
						<el-transfer
							v-model="paramsForm.topIds"
							:data="topList"
							filter-placeholder="请输入"
							filterable
							:props="{
								key: 'id',
								label: 'fullName',
							}"
							@change="handleChange"
							:target-order="'push'"
							:titles="['未分配', '已分配']"
						/>
					</el-col>
					<div class="card-main-title mb10 ml13">图表统计组件</div>
					<el-col :span="24">
						<el-transfer
							v-model="paramsForm.chartIds"
							:data="chartList"
							filter-placeholder="请输入"
							filterable
							:props="{
								key: 'id',
								label: 'fullName',
							}"
							@change="handleChange"
							:target-order="'push'"
							:titles="['未分配', '已分配']"
						/>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>
<script setup>
import global from '@/utils/global'

const emit = defineEmits(['peak-modal-ok'])

const props = defineProps({
	topIds: {
		type: Array,
		default: () => [],
	},
	chartIds: {
		type: Array,
		default: () => [],
	},
})

const state = reactive({
	showModal: false,
	paramsFormRef: null,
	title: '',
	paramsForm: {
		topIds: [],
		chartIds: [],
	},
	paramsRules: {},
	topList: [],
	chartList: [],
})

const { topList, chartList, showModal, paramsFormRef, title, paramsForm, paramsRules } = toRefs(state)

const handleShowModal = async () => {
	state.showModal = true
	await nextTick()
	state.paramsFormRef.resetFields()
	state.title = '配置组件'
	await getTopDataDetail() //编辑
	await getTopChartDetail()
	state.paramsForm.topIds = props.topIds
	state.paramsForm.chartIds = props.chartIds
}
const getTopDataDetail = () => {
	global.$fetchGetData(`/meta-system/web/v1/chartBoard/listByType/1`, {}).then(data => {
		if (data.code == 200) {
			state.topList = data.data.filter(item => item.status == 1)
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
const getTopChartDetail = () => {
	global.$fetchGetData(`/meta-system/web/v1/chartBoard/listByType/2`, {}).then(data => {
		if (data.code == 200) {
			state.chartList = data.data.filter(item => item.status == 1)
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
const handleChange = (value, direction, movedKeys) => {
	global
		.$fetchPostData(`/meta-system/web/v1/chartBoard/operator`, {
			ids: movedKeys,
			operType: direction == 'right' ? 1 : 2,
		})
		.then(data => {
			if (data.code == 200) {
				emit('peak-modal-ok', 2)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
}
defineExpose({
	handleShowModal,
})
</script>
<style lang="scss" scoped>
:deep() {
	.el-dialog__body {
		padding-top: 10px;
		padding-bottom: 0px;
	}
	.el-transfer-panel {
		width: 36%;
		margin-bottom: 20px;
		margin-left: 5px;
	}
	.el-transfer-panel__header {
		.el-checkbox__label {
			color: #626b7d !important;
			font-size: 14px !important;
		}
	}
	.el-transfer-panel__body {
		height: 330px;
		overflow-y: auto;
	}
	.el-transfer-panel__footer {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.el-button {
			margin-right: 10px;
			margin-left: 0px;
		}
	}
	.el-transfer-panel__list {
		height: 265px !important;
		overflow-y: auto;
		scrollbar-width: thin;
	}
}
</style>
